<template>
  <el-descriptions
      class="margin-top"
      title="个人简介"
      :column="3"
      :size="'large'"
      border
  >
    <template #extra>
      <el-button type="primary" @click="handleUpdate">修改信息</el-button>
    </template>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon><user /></el-icon>
          用户名
        </div>
      </template>
      {{ userData.username }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon><tickets /></el-icon>
          密码
        </div>
      </template>
      {{ userData.password }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon ><user /></el-icon>
          昵称
        </div>
      </template>
      {{ userData.nickname }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon><iphone /></el-icon>
         联系方式
        </div>
      </template>
      {{ userData.phone }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon ><tickets /></el-icon>
          身份
        </div>
      </template>
      <el-tag size="large">影视会员</el-tag>
    </el-descriptions-item>
  </el-descriptions>
  <!--修改影视对话框 -->
  <el-dialog :title="title" :model-value="open" width="550px" style="height: 300px" append-to-body :show-close="false">
    <el-form :model="form"  label-width="100px">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="form.username" placeholder="请输入用户名" />
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="form.password" placeholder="请输入密码" />
      </el-form-item>
      <el-form-item label="昵称" prop="nickname">
        <el-input v-model="form.nickname" placeholder="请输入昵称" />
      </el-form-item>
      <el-form-item label="手机号" prop="phone">
        <el-input v-model="form.phone" placeholder="请输入手机号" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer" style="float: right">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script setup>
import {onMounted, ref} from "vue";
import {getUserList, updateUser} from "@/api/user.js";
import {ElMessage, ElMessageBox} from "element-plus";
import {Iphone, Tickets, User} from "@element-plus/icons-vue";
import store from "@/store/index.js";
import router from "@/router/index.js";

const userData = ref({
  uid:'',
  username:'',
  password:'',
  nickname:'',
  phone:'',
  isAdmin: 0
})
const open = ref(false)
const currentUid = ref()
const title = ref('')
// 表单参数
const form = ref({
  uid:'',
  username:'',
  password:'',
  nickname:'',
  phone:'',
})
onMounted( async () => {
  currentUid.value = await store.getters.getUser.name
  if (typeof currentUid.value === "number" && currentUid.value !== 1) {
    await getList()
  }
})
//表单重置
function resetForm(){
  form.value = {
    uid:null,
    username:null,
    password:null,
    nickname:null,
    phone:null,
    isAdmin:null
  }
}

// 取消按钮
function cancel() {
  open.value = false;
  resetForm();
}
async function getList(){
  const res = await getUserList({uid:currentUid.value})
  userData.value = res.data.data[0]
  console.log("userData.value444", userData.value)
}
//修改
function handleUpdate() {
  resetForm();
  const uid = {uid:currentUid.value};
  console.log("uid",uid)
  getUserList(uid).then((response) => {
    form.value = response.data.data[0];
    console.log("form.value",form.value)
    console.log("response.data.data",response.data.data)
    open.value = true;
    title.value = "修改影视";
  });
}
//提交表单
function submitForm() {
    updateUser(form.value).then((response) => {
      ElMessage.success("修改成功");
      open.value = false;
      getList();
    });
}
</script>

<style scoped>
.cell-item {
  display: flex;
  align-items: center;
}
.margin-top {
  margin-top: 20px;
}
</style>
